<template>
  <!-- 工艺明细 -->
  <div class="pr">
    <a-spin :spinning="spinning">
      <a-row :gutter="12">
        <a-col :span="8">
          <h5 class="fs14">设计图</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              v-model:files="designInfo.styleFiles"
              middle
              :limitNum="3"
              :disabled="calcModuleDisable('styleFiles')"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
        <a-col :span="8">
          <h5 class="fs14">人台三视图</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              v-model:files="designInfo.threeViewsFiles"
              middle
              :limitNum="3"
              :disabled="calcModuleDisable('threeViewsFiles')"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
        <a-col :span="8">
          <h5 class="fs14">网站图</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              v-model:files="designInfo.webFiles"
              middle
              :limitNum="3"
              :disabled="calcModuleDisable('webFiles')"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
      </a-row>
      <!-- 审版意见不同的版本风格 -->
      <a-row v-if="reviewCommentsType == 1">
        <h5 class="fs14">审版意见</h5>
        <column-Table
          :row-key="(record, i) => i + 'commentVos'"
          :source="designInfo.commentVos"
          tableName="commentVos"
          :disabled="calcModuleDisable('commentVos')"
          @operator="operator"
          @addLine="tableName => addRow(tableName)"
          :columns="sewingColumns"
        >
        </column-Table>
      </a-row>
      <a-row v-if="reviewCommentsType == 2">
        <splReview :isdisabled="true" :cp="cp"></splReview>
      </a-row>
      <!-- 审版意见3 -->

      <reviewComments3
        v-if="reviewCommentsType == 3"
        :disabled="calcModuleDisable('commentVos')"
        :cp="cp"
        ref="getSplReviewRef"
        :isTemplate="designInfo.templateFlag === 1"
        :data="designInfo.comments"
        :conclusion="designInfo.conclusion"
        :supplierId="supplierId"
        @update="updateReviewCommnets"
      ></reviewComments3>
      <!-- 大货工艺单新增需求是否优化放开，是则需要选择翻单优化款 -->
      <a-row>
        <h5 class="fs14">翻单优化</h5>
        <column-Table
          module-name="optimizeVos"
          :row-key="(record, i) => Math.random() + 'optimizeVos'"
          :source="designInfo.optimizeVos"
          tableName="optimizeVos"
          disabled
          :columns="optimizeVosColumns"
        >
          <template #ossList="{ record }">
            <oss-upload
              v-model:files="record.ossList"
              small
              list-type="picture-card"
              :size="20"
              disabled
              accept="png,jpg,jpeg,gif"
            ></oss-upload>
          </template>
        </column-Table>
        <a-button
          style="margin-top: 8px"
          type="dashed"
          block
          size="small"
          @click="addOptimizeLine"
          v-if="!calcModuleDisable('optimizeVos')"
        >
          <template #icon><PlusOutlined /></template>
          添加
        </a-button>
      </a-row>

      <a-row>
        <h5 class="fs14">结论</h5>
        <a-textarea
          v-if="
            locTest('/innovative') > 1 || locTest('/purchase/PurchaseOrder') > 1
          "
          v-model:value="designInfo.conclusion"
        />
        &nbsp;&nbsp;&nbsp;&nbsp;<span
          v-if="locTest('/preWarehouseInspect') > 1"
          >{{ designInfo.conclusion }}</span
        >
      </a-row>
      <a-row class="mt10 db">
        <h5 class="fs14">线稿图及尺寸图</h5>
        <a-row
          :gutter="24"
          style="min-height: 320px; max-hegiht: 400px; padding-right: 12px"
        >
          <a-col :lg="8" :xxl="6" :md="8" style="width: 33.3%">
            <a-carousel
              :dots="false"
              :key="new Date().getTime()"
              arrows
              class="mb10 myCarousel"
              style="height: 395px"
              v-if="
                imgList.length &&
                imgList.length === designInfo.sizeLineFile.length
              "
            >
              <div
                v-for="(item, index) in imgList"
                :key="item.ossUrl"
                :data-index="index - 1"
                class="tac lh395"
              >
                <img
                  :src="item.ossUrl"
                  alt=""
                  srcset=""
                  style="
                    max-height: 100%;
                    max-width: 100%;
                    text-align: center;
                    display: inline;
                  "
                />
              </div>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 0; zindex: 1">
                  <LeftOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 0">
                  <RightOutlined />
                </div>
              </template>
            </a-carousel>
            <div class="mb10" style="height: 395px" v-else>
              <img
                src="@/assets/img/no-picture.png"
                style="height: 100%"
                alt=""
              />
            </div>
            <oss-upload
              :limitNum="4"
              v-model:files="designInfo.sizeLineFile"
              list-type="picture-card"
              :disabled="calcModuleDisable('sizeLineFile')"
              accept=".png,.jpg,.jpeg"
              class="uploadImg"
            ></oss-upload>
          </a-col>

          <a-col
            :lg="16"
            :xxl="18"
            :md="16"
            style="padding-right: 0; padding-left: 0; width: 66.6%"
          >
            <div style="overflow: auto">
              <div style="margin-bottom: 3px; width: 100%; height: 22px">
                <!-- 多选 -->
                <a-checkbox-group
                  v-if="isCheckbox"
                  :disabled="calcModuleDisable('charts')"
                  v-model:value="designInfo.checkParts"
                  @change="handleChangePart"
                >
                  <a-checkbox
                    v-for="item in partOptions"
                    :key="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  >
                    {{ item.label }}
                  </a-checkbox>
                </a-checkbox-group>
                <!-- 单选 -->
                <a-radio-group
                  v-if="isRadio"
                  :disabled="calcModuleDisable('charts')"
                  v-model:value="designInfo.checkParts"
                  :options="partOptions"
                  @change="handleChangePart"
                />
                <SettingOutlined
                  v-if="showSetting"
                  style="cursor: pointer"
                  type="setting"
                  @click=";(showSizeConfig = true), getConfigSize()"
                />
              </div>

              <excelTable
                v-if="showExcel"
                ref="excelTable"
                :editable="!calcModuleDisable('charts')"
                :excelId="'jexcelSize' + Math.random()"
                :source="designInfo.excelSource || []"
                :columns="designInfo.excelColumns"
                :hight-lights="designInfo.coordinatesReqs"
                :delete-lists="delteItems"
                @deleteLights="deleteHight"
                @changeY="changeHightLight"
                @addLight="addHightLight"
                @clear="clearHight"
                @empty="emptyList"
                :showSetting="showSetting"
                :cpSizeVos="designInfo.cpSizeVos"
              />
            </div>
            <div class="mt10">参考链接：{{ designInfo.referenceLink }}</div>
            <!-- <a-form class="weight-form">
            <a-row type="flex" class="aic">
              <span style="width: 200px" class="tal pl10">毛重（g）</span>
              <span
                style="width: 200px;color:#1890ff;"
                class="tar pr10"
                @click="syncWeight"
                >同步毛重</span
              >
              <span
                v-for="item in designInfo.sizeCodeList"
                :key="item"
                style="width: 80px"
              >
                <a-form-item style="margin-bottom: 0">
                  <a-input-number
                    v-model:value="weightInfo[item]"
                    :min="0"
                    style="width: 90%"
                  />
                </a-form-item>
              </span>
              <span style="width: 143px" />
            </a-row>
          </a-form> -->
          </a-col>

          <!-- <a-col
            v-else
            :lg="16"
            :xxl="18"
            :md="16"
            style="padding-right:0;padding-left:0;width:66.6%;overflow:auto;"
          >
            <excelTable
              ref="excelTable"
              excel-id="jexcelSize"
              :source="designInfo.excelSource || []"
              :columns="designInfo.excelColumns"
              :hight-lights="designInfo.coordinatesReqs"
              :delete-lists="delteItems"
              :editable="false"
              @deleteLights="deleteHight"
              @changeY="changeHightLight"
              @addLight="addHightLight"
              @clear="clearHight"
              @empty="emptyList"
            />
          </a-col> -->
        </a-row>
      </a-row>
      <a-row class="mt10">
        <h5 class="fs14">工艺说明</h5>
        <column-Table
          :disabled="calcModuleDisable('descVos')"
          tableName="descVos"
          :source="designInfo.descVos"
          :columns="processColumns"
          @addLine="tableName => addRow(tableName)"
          @operator="operator"
        />
      </a-row>
      <a-row class="mt10">
        <h5 class="fs14">裁剪要求</h5>
        <column-Table
          :disabled="calcModuleDisable('cropVos')"
          tableName="cropVos"
          :source="designInfo.cropVos"
          :columns="cuttingColumns"
          @addLine="tableName => addRow(tableName)"
          @operator="operator"
        />
      </a-row>
      <a-row :gutter="24" class="mt10">
        <a-col :span="8">
          <h5 class="fs14">花稿</h5>
          <oss-upload
            class="col1"
            :limitNum="3"
            :disabled="calcModuleDisable('flowerFiles')"
            v-model:files="designInfo.flowerFiles"
            accept=".ai,.psd"
            is-dragger
          />
        </a-col>
        <a-col :span="8">
          <!-- <h5 class="fs14">
            版图
          </h5> -->
          <h5 class="fs14">纸样</h5>
          <oss-upload
            class="col1"
            :limitNum="3"
            :disabled="calcModuleDisable('territoryFiles')"
            v-model:files="designInfo.territoryFiles"
            accept=".prj,.dwg,.dxf,.rul"
            is-dragger
          />
        </a-col>
        <!-- <a-col :span="8">
          <h5 class="fs14">
            纸样
          </h5>
          <oss-upload
            class="col1"
            :limitNum="6"
            :disabled="designInfo.disabled"
            v-model:files="designInfo.patternFiles"
            accept=".dxf,.rul,.prj"
            is-dragger
          />
        </a-col> -->
      </a-row>
    </a-spin>
    <a-modal
      v-model:visible="showSizeConfig"
      title="尺码计算规则配置"
      ok-text="保存"
      cancel-text="取消"
      class="small"
      width="600px"
      @ok="saveSizeConfig"
    >
      <a-table
        bordered
        :columns="[
          {
            key: 'sizeRange',
            dataIndex: 'sizeRange',
            title: '尺码范围',
            slots: { customRender: 'sizeRange' }
          },
          {
            key: 'countColumn',
            dataIndex: 'countColumn',
            title: '计算列',
            slots: { customRender: 'countColumn' }
          },
          {
            key: 'action',
            dataIndex: 'action',
            title: '操作',
            slots: { customRender: 'action' }
          }
        ]"
        :data-source="sizeConfigDatas"
        :pagination="false"
        :row-key="(record, index) => index"
      >
        <template #sizeRange="{ record }">
          <a-select v-model:value="record.sizeStart" class="w40p">
            <a-select-option
              v-for="item in sizeModels"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
          <span style="margin: 0 10px">-</span>
          <a-select v-model:value="record.sizeEnd" class="w40p">
            <a-select-option
              v-for="item in sizeModels"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </template>
        <template #countColumn="{ record }">
          <a-select v-model:value="record.sizeBase" class="w100p">
            <a-select-option
              v-for="item in sizeModels"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </template>
        <template #action="{ index }">
          <a-button type="link" @click="sizeConfigDatas.splice(index, 1)">
            删除
          </a-button>
        </template>
      </a-table>
      <div class="add-btn" @click="addLine">+ 添加</div>
    </a-modal>
  </div>
</template>
<script>
// import commentCom from '../cpCard/components/children/comment.vue'
// import craftTable from '../cpCard/components/children/craftTable.vue'
import { useProcessSheet, useHightLight, useInit } from '@/hook/processSheet.js'
import splReview from './splReview.vue'
import reviewComments3 from './reviewComments3.vue'
import { useRoute } from 'vue-router'
import { watch, toRefs, onMounted, ref, nextTick } from 'vue'
import {
  LeftOutlined,
  RightOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
import { cp_card_update_config_size_post } from 'server/modules/4494.js'
import { message } from 'ant-design-vue'
export default {
  components: {
    splReview,
    reviewComments3,
    LeftOutlined,
    RightOutlined,
    SettingOutlined
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    cp: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: null
    },
    supplierId: {
      type: Number,
      default: null
    },
    purchaseTaskId: {
      type: Number,
      default: null
    },
    source: {
      type: Number,
      default: null
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    templateFunc: {
      type: Function,
      default: null
    },
    detailFunc: {
      type: Function,
      default: null
    },
    isCheckbox: {
      type: Boolean,
      default: false
    },
    isRadio: {
      type: Boolean,
      default: false
    },
    // 审版意见风格  1 正常跟泳衣的风格一致   2、评审风格  3、
    reviewCommentsType: {
      type: Number,
      default: 1
    },
    innovite: {
      type: Boolean,
      default: false
    },
    isTemplate: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showSetting: {
      type: Boolean,
      default: false
    },
    // 是否为优化款
    isOptimize: {
      type: Boolean,
      default: false
    },
    optimizeVos: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props, { emit }) {
    const {
      processState,
      processMethods,
      partOptions,
      imgList,
      calcModuleDisable,
      weightInfo
    } = useProcessSheet(props)
    const getSplReviewRef = ref(null)
    const route = useRoute()
    console.log('route ', route)

    // 处理高亮 lx
    const {
      addHightLight,
      clearHight,
      changeHightLight,
      deleteHight,
      emptyList,
      delteItems
    } = useHightLight(processState)

    // 初始化
    const { fetchData, spinning } = useInit(props, emit, processMethods)

    // 评审意见数据
    const updateReviewCommnets = (comments, conclusion) => {
      processState.designInfo.comments = comments
      processState.designInfo.conclusion = conclusion
    }
    const saveSizeConfig = async () => {
      const hasEmpty = processState.sizeConfigDatas.some(
        item => !item.sizeBase || !item.sizeStart || !item.sizeEnd
      )
      if (hasEmpty) return message.error('请先选择尺码范围和计算列')
      const { success, retInfo } = await cp_card_update_config_size_post({
        cp: props.cp,
        configCpSizeList: processState.sizeConfigDatas,
        sizeModels: processState.sizeModels
      })
      processState.showExcel = false
      if (success) {
        message.success(retInfo)
        processState.showSizeConfig = false
        setTimeout(() => {
          processState.showExcel = true
        }, 500)
        fetchData()
      } else {
        message.error(retInfo)
      }
    }

    watch(
      () => processState.designInfo.sizeCodeList,
      val => {
        nextTick(() => {
          let count = -1
          val.forEach((item, index) => {
            if (item.indexOf('纸样尺码') !== -1) {
              count = index
            }
          })
          if (count !== -1) {
            const els = document.querySelectorAll(
              `.jexcel tr td:nth-of-type(${count + 5})`
            )
            els.forEach(item => {
              item.style.background = 'yellow'
            })
          }
        })
      },
      {
        deep: true
      }
    )

    watch(
      [() => props.isOptimize, () => props.optimizeVos],
      () => {
        if (props.isOptimize && props.optimizeVos.length) {
          processState.designInfo.optimizeVos = props.optimizeVos
        } else if (!props.isOptimize) {
          processState.designInfo.optimizeVos = []
        }
      },
      {
        deep: true
      }
    )
    watch(
      () => processState.designInfo.optimizeVos,
      () => {
        if (props.optimizeVos.length) {
          processState.designInfo.optimizeVos = props.optimizeVos
        }
      },
      {
        deep: true
      }
    )

    const addOptimizeLine = () => {
      emit('addLine')
    }
    onMounted(() => {
      fetchData()
      console.log(processState.designInfo, 'designInfo')
    })

    return {
      locTest: (val = null) => {
        console.log(' window.location.href ', window.location.href)
        return window.location.href.split(val).length
      },
      locTest2: () => {
        return window.location.href
      },
      calcModuleDisable,
      route,
      weightInfo,
      updateReviewCommnets,
      getSplReviewRef,
      spinning,
      refresh: fetchData,
      partOptions,
      imgList,
      ...processMethods,
      ...toRefs(processState),
      addHightLight,
      changeHightLight,
      clearHight,
      delteItems,
      emptyList,
      deleteHight,
      addOptimizeLine,
      saveSizeConfig
    }
  }
}
</script>
<style lang="scss" scoped>
.weight-form {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-top: -10px;
  text-align: center;
  background-color: #f3f3f3;
  .ant-row-flex {
    flex-wrap: nowrap;
  }
  span {
    display: inline-block;
  }
  span:last-child {
    color: #d8d5d5;
  }
}
.lh395 {
  line-height: 395px;
}
.ant-carousel .slick-arrow.custom-slick-arrow {
  font-size: 14px;
  color: #333;
  width: 25px;
  line-height: 50px;
  text-align: center;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.6);
  /* opacity: 0.3; */
}
:deep .myCarousel {
  .slick-slider,
  .slick-slide div,
  .slick-track,
  .slick-list {
    height: 100%;
  }
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.5;
}
.custom-slick-arrow.slick-arrow.slick-prev {
  z-index: 9;
}

.uploadImg .ant-upload-picture-card-wrapper {
  width: 326px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-shrink: 0;
}
.uploadImg .ant-upload-list {
  display: flex;
}
</style>
<style>
body td.disabled {
  text-align: left !important;
  border-bottom: unset !important;
  border-right: 0 !important;
  background-color: rgba(250, 250, 250, 1) !important;
  color: #262626 !important;
}
.jexcel .disabled.highlight-bottom {
  border-bottom: unset !important;
}
.jexcel .disabled.highlight-right {
  border-right: unset !important;
}
.jexcel .disabled.highlight-left {
  border-left: unset !important;
  box-shadow: unset !important;
}
.jexcel .disabled.highlight-top {
  border-top: 1px solid #ccc !important;
}
.jexcel_content {
  box-shadow: unset !important;
}
.weightImg .ant-upload.ant-upload-select-picture-card {
  width: 100% !important;
  height: 400px !important;
}
.weightImg .ant-upload-list-picture-card-container,
.weightImg .ant-upload-list-picture-card .ant-upload-list-item {
  width: 100% !important;
  height: 400px !important;
}
.add-btn {
  width: 100%;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  margin-top: 10px;
  cursor: pointer;
}
</style>
